<template>
	<view class="u-page">
		<nav-bar title="用车记录详情" :show-right-icon="false"></nav-bar>
		<view class="u-page__item">
	<up-index-list :indexList="indexList">
		<template #header>
			<view class="searchbox">
				<up-search
										v-model="searchKey"
										:show-action="false"
										borderColor="rgb(230, 230, 230)"
										bgColor="#fff"
										@change="searchChange"
									></up-search>
			</view>
		</template>
		<template :key="index" v-for="(item, index) in itemArr">
			<!-- #ifdef APP-NVUE -->
			<up-index-anchor :text="indexList[index]"></up-index-anchor>
			<!-- #endif -->
			<up-index-item>
				<up-index-anchor :text="indexList[index]"></up-index-anchor>
				<!-- #ifndef APP-NVUE -->
				
				<!-- #endif -->
				<view class="list" v-for="(item1, index1) in item" :key="index1">
					<view class="list__item">
						<text class="list__item__user-name">{{item1.name}}</text>
						<text class="list__item__user-phone">{{item1.phone}}</text>
					</view>
					<up-line></up-line>
				</view>
			</up-index-item>
		</template>
		<template #footer>
			<!-- <view class="u-safe-area-inset--bottom">
				<text class="list__footer">共305位好友</text>
			</view> -->
		</template>
	</up-index-list>
	</view>
	</view>
</template>

<script>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import NavBar from '@/components/NavBar.vue';
	import {getTXLList} from "@/api/mine.js"
	const indexList = () => {
		const indexList = []
		const charCodeOfA = 'A'.charCodeAt(0)
		for (let i = 0; i < 26; i++) {
			indexList.push(String.fromCharCode(charCodeOfA + i))
		}
		indexList.push('#')
		return indexList
	}
	export default {
		data() {
			return {
				indexList: indexList(),
				names: ["勇往无敌", "疯狂的迪飙", "磊爱可", "梦幻梦幻梦", "枫中飘瓢", "飞翔天使",
									"曾经第一", "追风幻影族长", "麦小姐", "胡格罗雅"
								],
				phones:['1583711890','1583711891','1583711892','1583711893',
				'1583711894','1583711895','1583711896','1583711897','1583711898','1583711899'],
				searchKey:''
			}
		},
		computed: {
			itemArr() {
				return this.indexList.map(item => {
					const arr = []
					for (let i = 0; i < 10; i++) {
						arr.push({
							name: this.names[uni.$u.random(0, this.names.length - 1)],
							phone: this.phones[uni.$u.random(0, this.phones.length - 1)]
						})
					}
					return arr
				})
			}
		},
		created() {
			this.serverGetTXL()
		},
		methods: {
			serverGetTXL(){
				let params = {
					accountname:'',
					companyname:''
				}
				getTXLList(params).then(res => {
					if(res.code === 1){
						indexList.value = res.data;
					}else{
						
					}
				})
			},
			searchChange(value){
				console.log(value);
			}
		}
	}
</script>

<style lang="scss">
	.searchbox{
		margin: 10px;
		height: 44px;
	}
	.list {
		
		&__item {
			@include flex;
			padding: 6px 12px;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			&__avatar {
				height: 35px;
				width: 35px;
				border-radius: 3px;
			}
			
			&__user-name {
				font-size: 16px;
				margin-left: 10px;
				color: $u-main-color;
			}
			&__user-phone{
				font-size: 14px;
				margin-right: 20px;
				color: #797E84;
			}
		}
		
		&__footer {
			color: $u-tips-color;
			font-size: 14px;
			text-align: center;
			margin: 15px 0;
		}
	}
</style>